<template>
  <a-modal
    width="600px"
    v-model="innerVisible"
    :title="title ? title : $t('all.autotext842')"
    @ok="submit"
    @cancel="close"
    :oktext="$t('all.autotext218')"
    :canceltext="$t('all.autotext975')"
  >
    <a-form-model
      labelAlign="left"
      :rules="rules"
      :model="form"
      ref="ruleForm"
    >
      <a-form-model-item label="" prop="account">
        <a-input v-model="form.account" :placeholder="$t('all.autotext1190')" />
      </a-form-model-item>
      <a-form-model-item label="" prop="pwd">
        <a-input-password v-model="form.pwd" autocomplete="off" :placeholder="$t('all.autotext575')" />
      </a-form-model-item>
      <a-form-model-item label="" v-if="content">
        <a-checkbox v-model="checked">{{ content }}</a-checkbox>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
// import modalMixin from '@/utils/modal.mixin'
import { loginAgain } from '@/api/login'
import { message } from 'ant-design-vue'

export default {
  props: ['data', 'content', 'title'],
  // mixins: [modalMixin],
  data () {
    return {
      innerVisible: false,
      type: '',
      form: { pwd: undefined },
      rules: {
        account: [{ required: true, message: this.$t('all.autotext1190'), trigger: 'blur' }],
        pwd: [{ required: true, message: this.$t('all.autotext154'), trigger: 'blur' }]
      },
      checked: false
    }
  },
  methods: {
    open (type) {
      this.type = type
      this.innerVisible = true
    },
    async submit () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        if (this.content && !this.checked) {
          message.error(this.$t('all.autotext605'))
          return
        }
        await loginAgain({
          account: this.form.account,
          pwd: this.form.pwd
        })
        this.$emit('ok', this.type)
        this.form = {}
        this.innerVisible = false
      })
    },
    close () {
      this.$refs.ruleForm.resetFields()
      this.form = {}
      this.checked = false
      this.innerVisible = false
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
</style>
